import 'package:flutter/material.dart';
import 'package:flutter_form_builder/flutter_form_builder.dart';
import 'package:get/get.dart';
import 'package:hive_flutter/hive_flutter.dart';
import 'package:ichinesereader/constants.dart';
import 'package:ichinesereader/controller/evaluation.dart';
import 'package:ichinesereader/models/evaluation/evaluationOverviewResult.dart';
import 'package:ichinesereader/models/report/evaluationLevelChartData.dart';
import 'package:ichinesereader/utils/log.dart';
import 'package:ichinesereader/widgets/charts/evaluationAccuracy.dart';

class EvaluationOverviewChartStudentPage extends StatefulWidget {
  @override
  _EvaluationOverviewChartStudentPageState createState() =>
      _EvaluationOverviewChartStudentPageState();
}

class _EvaluationOverviewChartStudentPageState
    extends State<EvaluationOverviewChartStudentPage> {
  final box = Hive.box('appconfig');
  final EvaluationController controller = Get.find();
  var evaluationData = new EvaluationOverViewData();
  String _mode = Constants.overviewChartModes[0];

  @override
  void initState() {
    if (_mode == Constants.overviewChartModes[0]) {
      controller.fetchEvaluationOverviewData('').then((data) {
        setState(() {
          evaluationData = data;
        });
      });
    }
    if (_mode == Constants.overviewChartModes[1]) {
      controller.fetchBenchmarkOverviewData('').then((data) {
        setState(() {
          evaluationData = data;
        });
      });
    }
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    Log.debug('build student evaluation overview charts page');

    List<EvaluationLevelChart> chartData = [];
    if (evaluationData.icrLevel != null) {
      evaluationData.icrLevel?.forEach((item) {
        EvaluationLevelChart chart = EvaluationLevelChart(
            item.level.toString(),
            item.listeningAccuracy! / 10,
            item.speakingScore?.toDouble(),
            _mode == Constants.overviewChartModes[0]
                ? item.speakingAiScore! / 10
                : null,
            item.readingAccuracy! / 10,
            item.writingScore?.toDouble(),
            0);
        chartData.add(chart);
      });
    }

    return Scaffold(
      backgroundColor: Colors.transparent,
      body: SingleChildScrollView(
        scrollDirection: Axis.vertical,
        primary: false,
        child: Center(
          child: Column(
            children: [
              Row(
                mainAxisAlignment: MainAxisAlignment.end,
                children: [
                  Visibility(
                    visible: false,
                    child: Container(
                        height: 48,
                        width: 240,
                        child: FormBuilderChoiceChip(
                          decoration: InputDecoration.collapsed(
                            hintText: '',
                            border: InputBorder.none,
                          ),
                          spacing: 8,
                          labelStyle: TextStyle(
                            fontFamily: 'Montserrat',
                            color: Theme.of(context).primaryColorLight,
                            fontSize: 15,
                            letterSpacing: 0.8,
                          ),
                          backgroundColor: Get.theme.primaryColor,
                          //labelStyle: TextStyle(color: Get.isDarkMode? (Colors.black): Get.theme.primaryColorLight,),
                          selectedColor: Get.isDarkMode
                              ? (Colors.white)
                              : Theme.of(context).primaryColorDark,
                          name: 'level_standard_types',
                          onChanged: (value) {
                            if (value == null) return;
                          },
                          initialValue: Constants.levelStandardTypes[0],

                          ///这里暂时去掉yct
                          options: Constants.levelStandardTypes
                              .where((element) => element != 'YCT')
                              .map((state) => FormBuilderChipOption<String>(
                                    value: state,
                                    child: Text(
                                      state.toString(),
                                      style:
                                          TextStyle(fontFamily: 'Montserrat'),
                                    ),
                                  ))
                              .toList(),
                        )),
                  )
                ],
              ),
              Container(
                height: 45,
                width: 300,
                padding: EdgeInsets.only(left: 10),
                child: FormBuilderChoiceChip(
                  decoration: InputDecoration.collapsed(
                    hintText: '',
                    border: InputBorder.none,
                  ),
                  spacing: 9,
                  labelStyle: TextStyle(
                    color: Get.isDarkMode
                        ? Colors.black
                        : Theme.of(context).primaryColorLight,
                    fontSize: 15,
                    letterSpacing: 0.9,
                  ),
                  backgroundColor:
                      Get.isDarkMode ? Get.theme.primaryColor : Colors.blueGrey,
                  selectedColor: Get.isDarkMode
                      ? (Colors.white)
                      : Theme.of(context).primaryColorDark,
                  name: 'overview_chart_mode',
                  onChanged: (value) {
                    if (value == null) return;
                    _mode = value.toString();
                    if (_mode == Constants.overviewChartModes[0]) {
                      controller.fetchEvaluationOverviewData('').then((data) {
                        setState(() {
                          evaluationData = data;
                        });
                      });
                    }
                    if (_mode == Constants.overviewChartModes[1]) {
                      controller.fetchBenchmarkOverviewData('').then((data) {
                        setState(() {
                          evaluationData = data;
                        });
                      });
                    }
                  },
                  initialValue: Constants.overviewChartModes[0],
                  options: Constants.overviewChartModes
                      .map((state) => FormBuilderChipOption<String>(
                            value: state,
                            child: Text(
                              state.toString(),
                            ),
                          ))
                      .toList(),
                ),
              ),
              SizedBox(
                height: 20,
              ),
              Container(
                decoration: BoxDecoration(
                  color: Colors.white.withOpacity(0.2),
                  borderRadius: BorderRadius.circular(6.0),
                ),
                height: 450,
                width: context.width - 20,
                child: EvaluationStackedLineChartForStudent(
                    levelChartData: chartData,
                    chartTitle: 'Skills',
                    xLabel: 'Score',
                    yLabel: '',
                    mode: this._mode.toLowerCase()),
              ),
            ],
          ),
        ),
      ),
    );
  }
}
